<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>资源应用</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
	<meta http-equiv="expires" content="0"/>  
	<%@ include file="../include/common.jsp"%>
	<%@ include file="../include/table.jsp"%>
	<%@ include file="../include/jbox.jsp"%>
	<style type="text/css">
		.input_text{
			border:1px solid #D6D3D6;
			height: 20px;
			line-height:20px;
		}
		.operate,.displayRes{
			padding-top:5px;
		}
		.dataTables_wrapper{
			padding-bottom: 0px;
		}
		.dataTables_length{ left:2px;}
		.dataTables_info{right:2px;}
	</style>
	<script type="text/javascript">
		jQuery.fn.dataTableExt.oPagination.iFullNumbersShowPages=3; //设置datatable显示的页数
		$(document).ready(function(){
			$("#resList").dataTable({
				"bProcessing": true, 
				"bServerSide": true,
				"sServerMethod": 'POST',
				"sAjaxSource":'res-query!list.action?resId=${res.id}',
				"bPaginate":true,
				"bSort": true,
				"bFilter":false,
				"bJQueryUI":false,
				"sPaginationType": 'full_numbers',
				"sScrollY":260,
				"sDom": 'rt <"bottom"flpi>',
				"iDisplayLength":100,
				"iFullNumbersShowPages":3,
				"aLengthMenu": [[100], [100]],
				"aoColumns":[
					{"mDataProp":"checkbox","bSortable": false},
					{"mDataProp":"id","bSortable": false},
					{"mDataProp":"ip"},
					{"mDataProp":"parentName","bSortable": false}
				],
				"oLanguage": { 
					 				"sLengthMenu": "每页 _MENU_ 条",
					 		 		"sZeroRecords": "没有找到记录",
									"sInfo": "当前从 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", 
									"sInfoEmpty": "",
									"oPaginate":{"sFirst":"首页","sPrevious":"上一页","sNext":"下一页","sLast":"尾页"}	
				},
				"fnServerParams":function(aoData){
					var ip = $('#ip').val();
					var name= $('#name').val();
					if(ip!=''){
						aoData.push({"name":"FILTER_LIKE_Sip","value":ip});
					}
					if(name!=''){
						aoData.push({"name":"FILTER_LIKE_Sname","value":name});
					}
				},
				"fnInfoCallback":function(oSettings, iStart, iEnd, iMax, iTotal, sPre ){
					if($('#allCheck').attr("checked"))
				  	{
				  		$('#allCheck').attr("checked",false);
				  	}
				}
			});
			
			
			$('#resList tbody td input:checkbox').live('click', function (e) {
    			var nTr = $(this).parents('tr')[0]; 
    			var nTd = $(this);
   		    	showDetailFlag = true;
   		    	//$(nTr).hasClass('row_selected')
    			   if ($(e.target).attr('checked')!="checked" ) {
					  	$(nTr).removeClass('row_selected'); 
					  	//取消选中时 清除资源
					  	var selecteds = $("#selectedRes option");
					  	$.each(selecteds,function(index,ob){
					  		var id = $(ob).val();
					  		if(id==nTd.val()){
					  			$(ob).remove();
					  			return false;
					  		}
					  	});
				  }else{
				  		$(nTr).addClass('row_selected'); 
				  		 addRes();
				 }
				 if(!$(this).attr("checked")){
				 	$('#allCheck').attr("checked",false);
				 }
				
    		});
			
			showDetailFlag = false;
			$('#resList tbody tr').live('click', function (e) {
				 if(showDetailFlag){
				 	showDetailFlag = false;
				 	return;
				 }
			
				 //单机行的所有TD
				 var nTds = $('td', this);
			    if ( $(this).hasClass('row_selected') ) {
				  	$(this).removeClass('row_selected'); 
				  	//点击全选时，如果在全选的基础上 有一个被取消选择,全选checkedbox不选中
				  	if($('#allCheck').attr("checked"))
				  	{
				  		$('#allCheck').attr("checked",false);
				  	}
				  }else
				  {
					//显示背景色
				  	$(this).addClass('row_selected'); 
				 }
			});
			
			
		});
		
		function search(){
			var oTable=	$("#resList").dataTable();
			oTable.fnPageChange("first",true);
		}
		
		function allSelected(){
			var dt_check_all = $('#allCheck').attr("checked");
	  	    var allCheckbox = $("input[name='res_check']");
  	    	if(dt_check_all)
  	    	{
  	    		allCheckbox.attr("checked",allCheckbox);  //全选
  	    		$('#resList tbody tr').addClass('row_selected');  //背景色全选
  	    		addRes();
  	    	}else
  	    	{
  	    		allCheckbox.attr("checked",false);   //取消全选
  	    		$('#resList tbody tr').removeClass('row_selected');  //背景色取消
  	    		var options = $("select[name='selectedRes'] option");
  	    		options.each(function(index,ob){
  	    			allCheckbox.each(function(i,o){
  	    				var id = $(o).val();
  	    				if(id==ob.value){
  	    					$(ob).remove();
  	    					return;
  	    				}
  	    			});
  	    			
  	    		});
  	    	}
		}
		
		function addRes(){
			var checkboxs = $("input[name='res_check']");
			var oTable =$("#resList").dataTable();
			var selectRes = $('#selectedRes');
			var options = $("select[name='selectedRes'] option");
			$.each(checkboxs,function(index,ob){
				if($(ob).attr('checked')=='checked'){
					var res = oTable.fnGetNodes(index);
					var entity = oTable.fnGetData(res);
					var addFlag = true;
					
						options.each(function(i,o){
							if(entity.id==$(this).val()){
								addFlag=false;
								return false;
							}
						});
					if(addFlag==true){
						$("<option value='"+entity.id+"'  >"+entity.name+"<img src='${pageContext.request.contextPath}/style/default/bsm/images/arrow-down.gif' /></option>").appendTo(selectRes);
					}
						
				}
			});
		}
		
		function moveRes(){
			//同步于datatables 
			var oTable =$("#resList").dataTable();
			 var selectedRes = $("input[name='res_check']:checked");
		
			var selecteds = $("#selectedRes option:selected");
			$.each(selecteds,function(index,ob){
				$(this).remove();
				
				if(selectedRes.length>0){
				 	$.each(selectedRes,function(i,o){
				 		if(ob.value==o.value){
				 			$(o).removeAttr('checked');
				 			$('#allCheck').removeAttr('checked');
				 			return false;
				 		}
				 	});
				 }
			});
			
			 
		}
		
		function clearRes(){
		 	var selectedRes = $("input[name='res_check']:checked");
			var selecteds = $("#selectedRes option");
			$.each(selecteds,function(index,ob){
				$(this).remove();
				
				if(selectedRes.length>0){
				 	$.each(selectedRes,function(i,o){
				 		if(ob.value==o.value){
				 			$(o).removeAttr('checked');
				 			$('#allCheck').removeAttr('checked');
				 			return false;
				 		}
				 	});
				 }
			});
		}
		
		function sub(){
			var selecteds = $("#selectedRes option");
			if(selecteds.length>0){
				var resIds = new Array();
				$.each(selecteds,function(index,ob){
					resIds.push($(ob).val());
				});
				
				var depWin = getTopWin(window).currentWin['taskCommonWindow'];
				depWin.applyRes(resIds);
				getTopWin(window).closejBox('department');
			}else{
				$.jBox.alert('请选择要应用的资源','提示');
			}
			
		}
		
	
	</script>
  </head>
  
  <body style="width:690px;height:460px;padding:5px;overflow: hidden;" >
  	<div  id="mainLeft" style="width:495px;float:left;">
  		<div  class="searchFormStyle" id="searchParameter" style="margin-top: 0px;">
  			<label>资源IP：</label>
  			<input type="text"  name="ip" id="ip" class="input_text" value="${res.ip}" style="width:120px;" maxlength="20" />
  			<label>资源名称：</label>
  			<input type="text"  name="name" id="name" class="input_text" style="width:120px;" maxlength="20" />
  			<button id="search" onclick="search()" class="btn-4">查询</button>
  		</div>
  		
  		<div id="results" style="margin-top:5px;">
  			<table width="100%"  id="resList" cellpadding="0" cellspacing="0" border="0" class="display"  >
				<thead>
	    	 		<tr>
	    	 			<th width="25px">&nbsp;&nbsp;<input type="checkbox" name="allCheck" id="allCheck" onclick="allSelected()" /></th>
	    	 			<th width="40px">资源ID</th>
	    	 			<th width="100px">资源IP</th>
	    	 			<th>父资源/资源名称</th>
	    	 		</tr>
	    	 	</thead>
	    	</table>
  		</div>
  		
  	</div>
  	
  	<div id="mianRight" style="width:190px;float:right;text-align:center;height:82%;">
  		<h2 class="title-h2" style="margin-top:0px;text-align:left;">
  				<span><img src="${pageContext.request.contextPath}/style/default/bsm/images/arrow-down.gif"/></span>已选择的资源
  				<a style="margin-left:10%;" href="javascript:moveRes();">删除</a>
  				<a style="" href="javascript:clearRes();">清空</a>
  		</h2>
  		<div class="displayRes" style="height:100%;margin-top:-4px;">
  			<select id="selectedRes" name="selectedRes" multiple="multiple" style="width:190px;height:345px;border:1px solid #d8d8d8;"></select>
  		</div>
  	</div>
  	<div id="subDiv" style="text-align:right;width:100%;clear: both;margin-rigth:220px;padding:5px;">
  			<button onclick="sub()" class="btn-4" >提交</button>
  	</div>
  </body>
</html>
